import React, { Component, Fragment } from 'react';
import { routerRedux, Route, Switch, Link } from 'dva/router';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { connect } from 'dva';
import {
  Button,
  Menu,
  Dropdown,
  Icon,
  Row,
  Col,
  Input,
  InputNumber,
  Steps,
  Card,
  Popover,
  Badge,
  Table,
  Tooltip,
  Divider,
  Checkbox,
  Modal,
  Radio,
  Select,
  message,
  List,
  Form,
  Upload,
  Spin,
  DatePicker,
  Tag,
} from 'antd';
import moment from 'moment';
import classNames from 'classnames';
import { getRoutes } from '../../../utils/utils';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';
import styles from './style.less';
import { create } from 'domain';
import querystring from 'querystring';
import Result from '../../../components/Result';

const { Step } = Steps;
const TextArea = Input.TextArea;
const { Description } = DescriptionList;
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const FormItem = Form.Item;

@connect(({ channel }) => ({
  channel,
}))
@Form.create()
export default class Step4 extends Component {
  state = {};

  componentDidMount() {
    // const { dispatch, location } = this.props;
    // const params = querystring.parse(location.search.slice(1));
  }

  nextStep = () => {
    this.props.dispatch(routerRedux.push('/channel/channel-form/'));
  };
  previousStep = () => {
    // this.props.dispatch(routerRedux.push('/channel/channel-form/customer'));
  };

  handleCallbackChannelList = () => {
    this.props.dispatch(routerRedux.push('/channel/channel-maintenance/'));
  };

  render() {
    const { channel: { channelDetailValue } } = this.props;
    const { getFieldDecorator, getFieldValue, validateFieldsAndScroll } = this.props.form;
    const information = (
      <div className={styles.information}>
        <DescriptionList style={{ marginBottom: 20 }} col="1" title="经销商信息">
          <Description term="经销商名称">{channelDetailValue.dealerName}</Description>
        </DescriptionList>
        <DescriptionList col="2">
          <Description term="负责人">{channelDetailValue.leader}</Description>
          <Description term="联系电话">{channelDetailValue.phone}</Description>
          <Description term="开户银行">{channelDetailValue.depositBank}</Description>
          <Description term="开户账号">{channelDetailValue.bankAccount}</Description>
        </DescriptionList>
      </div>
    );
    const actions = (
      <Fragment>
        <Button type="primary" onClick={this.nextStep}>
          继续添加
        </Button>
        <Button onClick={this.handleCallbackChannelList}>返回列表</Button>
      </Fragment>
    );

    return (
      <Result
        type="success"
        title="操作成功"
        extra={information}
        actions={actions}
        className={styles.result}
      />
    );
  }
}
